<template>
	<view class="pagebox flex-column" v-if="obj.wh">
		<navSearchTop @srarch="srarch"/>
		<view class="tabbox flex-row-center pd30-row" :style="{top:`${obj.wh.navHeight}px`}">
			<view :class="['tab flex-center',obj.tabidx==i?'tabactive':'']" v-for="(v,i) in obj.tabs" :key="i" @click="tabchange(i)">{{v}}</view>
		</view>
		<view v-if="obj.tabidx==0" class="searchs" :style="{top:`${obj.navtabH}px`}"><searchs @searchs="searchsChange" /></view>
		<div :style="{height:`${obj.tabidx==0?obj.spaceH:obj.navtabH}px`}"></div>
		
		<products v-if="obj.tabidx==0" :list="obj.list" />
		<companys v-if="obj.tabidx==1" :list="obj.list" />
		<view v-if="obj.loadstatus=='noMore'&&obj.list.length" class="w100 flex-center f22 gray-color mt20 pb20">-- 沒有了 --</view>
		<view v-if="!obj.list.length" class="w100 flex-center f22 gray-color" style="height: 800rpx;">暂无数据</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
	import { onLoad,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import products from './products'
	import companys from './companys'
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		navtabH: proxy.$c.getglobal().navHeight+uni.upx2px(72),
		spaceH: proxy.$c.getglobal().navHeight+uni.upx2px(180),
		wh: proxy.$c.getglobal(),
		req: [{
			"company_id": '',
			"sort": 0,
			"key": "",
			"mesh_max": "",
			"mesh_min": "",
			"wire_diameter_max": "",
			"wire_diameter_min": "",
			"aperture": "",
			"length_max": "",
			"length_min": "",
			"width_max": "",
			"width_min": "",
			"material": "",
			"weaving_type": "",
			"tag_scene": "",
			"tag_industry": "",
			"tag_product": "",
			"currentpage": 1,
			"pagesize": 10
		},{
			"key": '',
			"currentpage": 1,
			"pagesize": 10000
		}],
		url: ['mp/product/list','mp/company/list'],
		tabs: ['产品','供应商'],
		tabidx: 0,
		list: [],
		loadstatus: 'more',//more loading noMore
		
	})
	
	onMounted(()=>{
		init()
	})
	
	const tabchange=(i)=>{
		obj.tabidx=i
		obj.list = []
		init()
	}
	
	const srarch=(value)=>{
		obj.req[obj.tabidx].key = value
		obj.req[obj.tabidx].currentpage = 1
		init()
	}
	
	const searchsChange=(req)=>{
		obj.req[obj.tabidx] = {
			...obj.req[obj.tabidx],
			...req
		}
		init()
	}
	
	const getmsg=()=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post(obj.url[obj.tabidx],obj.req[obj.tabidx],{token: true},).then(d=>{
				resovle(d.msg||{})
			}).catch(err=>{resovle({})})
		})
	}
	
	const init=async()=>{
		obj.req[obj.tabidx].currentpage = 1
		uni.showLoading({title: 'loading...',icon:'none'})
		let msg = await getmsg()
		obj.list = []
		uni.hideLoading()
		uni.stopPullDownRefresh()
		if(msg&&msg.list&&msg.list.length){
			obj.loadstatus = (obj.req[obj.tabidx].currentpage * obj.req[obj.tabidx].pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}
	}
	
	const getMore=async()=>{
		obj.loadstatus = 'loading'
		let msg = await getmsg()
		uni.stopPullDownRefresh()
		if(msg&&msg.list&&msg.list.length){
			obj.loadstatus = (obj.req[obj.tabidx].currentpage * obj.req[obj.tabidx].pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}else{
			obj.loadstatus = 'noMore'
		}
	}
	
	const setdatas=(list)=>{
		list.map(async(e,i)=>{
			const o = obj.list.find(ev=>ev.product_id==e.product_id&&ev.size_id==e.size_id)
			e.price = ''
			if(e.preferential&&e.preferential.length){
				const o1 = e.preferential.find(ev=>ev.unit=='平方米')
				const o2 = e.preferential.find(ev=>ev.unit=='米')
				const o3 = e.preferential.find(ev=>ev.unit=='张')
				const o4 = e.preferential.find(ev=>ev.unit=='卷')
				e.price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
				e.unit_ = o1 ? `平方米` : (o2 ? `米` : (o3 ? `张` : (o4 ? `卷` : '')))
			}
			if(!o){
				obj.list.push(e)	
			}
		})
		if(obj.loadstatus!='noMore'){
			obj.req[obj.tabidx].currentpage += 1;
		}
	}
	
	onPullDownRefresh(()=>{
		console.log('下拉了');
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},5000)
		init()
	})
	
	onReachBottom(()=>{
		console.log('到底了');
		getMore()
	})
</script>

<style lang="scss" scoped>
.pagebox{
	.searchs{position: fixed;left: 0;z-index: 99; width: 100vw;padding: 30rpx 30rpx 10rpx;box-sizing: border-box;background-color: #fff;}
	
	.tabbox{
		position: fixed;left: 0;z-index: 99;
		background: #fff;height: 72rpx;width: 100vw;
		.tab{font-size: 28rpx;color: #333;flex: 1;height: 70rpx;}
		.tabactive{font-weight: bold;color: #333;position: relative;}
		.tabactive::before{
			content: '';position: absolute;z-index: 1;display: block;
			left: 50%;bottom: 0;width: 160rpx;margin-left: -80rpx;height: 4rpx;background-color: #000;
		}
	}
	// width: 100vw;height: 100vh;
}
</style>
